<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="utf-8">
	<title>Dragon Ball Online Skill Calculator</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="css/style.css" />
</head>

<body onload="init();">
	<!-- 职业选择栏 -->
	<table class="titlebar">
		<tr>
			<td class="titlebar-topleft"></td>
			<td class="titlebar-top"></td>
			<td class="titlebar-topright"></td>
		</tr>
		<tr>
			<td class="titlebar-left"></td>
			<td class="search-class">
				<div class="search-class-row">
					<a href="?lang=%%lang%%&class=Fighter">
						<div> <img class="search-class-icon" src="img/11_small.png"> 格斗家 </div>
					</a>
					<a href="?lang=%%lang%%&class=Swordsman">
						<div> <img class="search-class-icon" src="img/17_small.png"> 剑术家 </div>
					</a>
				</div>
				<div class="search-class-row">
					<a href="?lang=%%lang%%&class=Crane-Hermit">
						<div> <img class="search-class-icon" src="img/12_small.png"> 鹤仙流 </div>
					</a>
					<a href="?lang=%%lang%%&class=Turtle-Hermit">
						<div> <img class="search-class-icon" src="img/18_small.png"> 龟仙流 </div>
					</a>
				</div>
				<div class="search-class-row">
					<a href="?lang=%%lang%%&class=Dark-Warrior">
						<div> <img class="search-class-icon" src="img/13_small.png"> 魔界战士 </div>
					</a>
					<a href="?lang=%%lang%%&class=Shadow-Knight">
						<div> <img class="search-class-icon" src="img/19_small.png"> 魔导战士 </div>
					</a>
				</div>
				<div class="search-class-row">
					<a href="?lang=%%lang%%&class=Dende-Priest">
						<div> <img class="search-class-icon" src="img/14_small.png"> 天天导师 </div>
					</a>
					<a href="?lang=%%lang%%&class=Poko-Priest">
						<div> <img class="search-class-icon" src="img/20_small.png"> 波克导师 </div>
					</a>
				</div>
				<div class="search-class-row">
					<a href="?lang=%%lang%%&class=Ultimate-Majin">
						<div> <img class="search-class-icon" src="img/15_small.png"> 奥迪魔 </div>
					</a>
					<a href="?lang=%%lang%%&class=Grand-Chef-Majin">
						<div> <img class="search-class-icon" src="img/21_small.png"> 格兰魔 </div>
					</a>
				</div>
				<div class="search-class-row">
					<a href="?lang=%%lang%%&class=Plasma-Majin">
						<div> <img class="search-class-icon" src="img/16_small.png"> 普利兹魔 </div>
					</a>
					<a href="?lang=%%lang%%&class=Karma-Majin">
						<div> <img class="search-class-icon" src="img/22_small.png"> 卡尔魔 </div>
					</a>
				</div>
			<td class="titlebar-right"></td>
		</tr>
		<tr>
			<td class="titlebar-bottomleft"></td>
			<td class="titlebar-bottom"></td>
			<td class="titlebar-bottomright"></td>
		</tr>
	</table>
	<br>
	<!-- 加点描述信息与重置信息 -->
	<div class="skill-calc-intro" style="float: left;color: #eb9408;">
		提示：使用下面的技能计算器来试验如何在游戏中使用您的 SP（技能点）。左键点击消耗一个 SP，右键点击移除一个 SP。无法移除点数的技能要么是必需的，要么不需要 SP 来学习。
		<br>
		<br>
		<div class="sp-remaining">
			总 SP 点数：
			<span id="remainingpoints">0</span>/79
			<u><a href="javascript:void(0)" onclick="reset(0, 0);">(点击重置)</a></u>
		</div>
	</div>
	<!-- 技能加点树 -->
	<table width="100%" height="1px">
		<tr>
			<td height="1px">
				<!-- 种族加点树 -->
				<div class="class-tree">
					<table>
						<!-- 种族点数记录 -->
						<tr>
							<td>
								<!-- oncontextmenu 右键点击事件，这里时禁止右键选取 -->
								<!-- ondragstart   用户开始拖动元素或选择的文本时触发，这里时禁止拖放 -->
								<!-- onselectstart 选择时触发，这里是禁止选择-->
								<table oncontextmenu="return false" onselectstart="return false"
									ondragstart="return false" class="titlebar">
									<tbody>
										<!-- 占用上空间 -->
										<tr>
											<td class="titlebar-topleft"></td>
											<td class="titlebar-top"></td>
											<td class="titlebar-topright"></td>
										</tr>
										<tr>
											<td class="titlebar-left"></td>
											<td>
												<div class="class-name">
													<img src='' id='basic_class_icon'> %%basic_class%% 技能
												</div>
												<div class="class-sp">
													<span id="classpoints">0</span> SP
													<u>
														<a href="javascript:void(0)" onclick="reset(1, 1);">(点击重置)</a>
													</u>
												</div>
											</td>
											<td class="titlebar-right"></td>
										</tr>
										<!-- 占用下空间 -->
										<tr>
											<td class="titlebar-bottomleft"></td>
											<td class="titlebar-bottom"></td>
											<td class="titlebar-bottomright"></td>
										</tr>
									</tbody>
								</table>
							</td>
						</tr>
						<!-- 空间间隔 -->
						<tr>
							<td height="8px"></td>
						</tr>
						<!-- 加点树 -->
						<tr>
							<td>
								<table oncontextmenu="return false" onselectstart="return false"
									ondragstart="return false" class="titlebar">
									<tbody>
										<tr>
											<td class="titlebar-topleft"></td>
											<td class="titlebar-top"></td>
											<td class="titlebar-topright"></td>
										</tr>
										<tr>
											<td class="titlebar-left"></td>
											<td>
												<table class="skill-tree">
													<tr>
														<td id="base-tree"></td>
													</tr>
												</table>
											</td>
											<td class="titlebar-right"></td>
										</tr>
										<tr>
											<td class="titlebar-bottomleft"></td>
											<td class="titlebar-bottom"></td>
											<td class="titlebar-bottomright"></td>
										</tr>
									</tbody>
								</table>
							</td>
						</tr>
					</table>
				</div>
				<!-- 职业加点树 -->
				<div class="master-class-tree">
					<table width="460px">
						<tr>
							<td>
								<table oncontextmenu="return false" onselectstart="return false"
									ondragstart="return false" class="titlebar">
									<tbody>
										<tr>
											<td class="titlebar-topleft"></td>
											<td class="titlebar-top"></td>
											<td class="titlebar-topright"></td>
										</tr>
										<tr>
											<td class="titlebar-left"></td>
											<td>
												<div class="class-name">
													<img src='' id='master_class_icon'> %%master_class%% 技能
												</div>
												<div class="class-sp">
													<span id="masterclasspoints">0</span> SP
													<u>
														<a href="javascript:void(0)" onclick="reset(2, 1);">(点击重置)</a>
													</u>
												</div>
											</td>
											<td class="titlebar-right"></td>
										</tr>
										<tr>
											<td class="titlebar-bottomleft"></td>
											<td class="titlebar-bottom"></td>
											<td class="titlebar-bottomright"></td>
										</tr>
									</tbody>
								</table>
							</td>
						</tr>
						<tr>
							<td height="8px"></td>
						</tr>
						<tr>
							<td>
								<table oncontextmenu="return false" onselectstart="return false"
									ondragstart="return false" class="titlebar">
									<tbody>
										<tr>
											<td class="titlebar-topleft"></td>
											<td class="titlebar-top"></td>
											<td class="titlebar-topright"></td>
										</tr>
										<tr>
											<td class="titlebar-left"></td>
											<td>
												<table class="skill-tree">
													<tr>
														<td id="mc-tree"></td>
													</tr>
												</table>
											</td>
											<td class="titlebar-right"></td>
										</tr>
										<tr>
											<td class="titlebar-bottomleft"></td>
											<td class="titlebar-bottom"></td>
											<td class="titlebar-bottomright"></td>
										</tr>
									</tbody>
								</table>
							</td>
						</tr>
						<tr>
							<td height="16px"></td>
						</tr>
					</table>
				</div>
			</td>
		</tr>
	</table>
	<script type="text/javascript">
		var class_data = JSON.parse('{"Martial-Artist":{"display_name":"武道家","class_id":1,"basic_class":null,"master_classes":["Fighter","Swordsman"]},"Spiritualist":{"display_name":"气功师","class_id":2,"basic_class":null,"master_classes":["Crane-Hermit","Turtle-Hermit"]},"Warrior":{"display_name":"娜美克战士","class_id":3,"basic_class":null,"master_classes":["Dark-Warrior","Shadow-Knight"]},"Dragon-Clan":{"display_name":"娜美克龙族","class_id":4,"basic_class":null,"master_classes":["Dende-Priest","Poko-Priest"]},"Mighty-Majin":{"display_name":"大魔人","class_id":5,"basic_class":null,"master_classes":["Ultimate-Majin","Grand-Chef-Majin"]},"Wonder-Majin":{"display_name":"意魔人","class_id":6,"basic_class":null,"master_classes":["Plasma-Majin","Karma-Majin"]},"Fighter":{"display_name":"格斗家","class_id":11,"basic_class":"Martial-Artist"},"Crane-Hermit":{"display_name":"鹤仙流","class_id":12,"basic_class":"Spiritualist"},"Dark-Warrior":{"display_name":"魔界战士","class_id":13,"basic_class":"Warrior"},"Dende-Priest":{"display_name":"天天导师","class_id":14,"basic_class":"Dragon-Clan"},"Ultimate-Majin":{"display_name":"奥迪魔","class_id":15,"basic_class":"Mighty-Majin"},"Plasma-Majin":{"display_name":"普利兹魔","class_id":16,"basic_class":"Wonder-Majin"},"Swordsman":{"display_name":"剑术家","class_id":17,"basic_class":"Martial-Artist"},"Turtle-Hermit":{"display_name":"龟仙流","class_id":18,"basic_class":"Spiritualist"},"Shadow-Knight":{"display_name":"魔导战士","class_id":19,"basic_class":"Warrior"},"Poko-Priest":{"display_name":"波克导师","class_id":20,"basic_class":"Dragon-Clan"},"Grand-Chef-Majin":{"display_name":"格兰魔","class_id":21,"basic_class":"Mighty-Majin"},"Karma-Majin":{"display_name":"卡尔魔","class_id":22,"basic_class":"Wonder-Majin"}}')
		var master_class = (new URL(window.location)).searchParams.get("class");
		var url = (new URL(window.location)).searchParams.get("build");
		var lang = (new URL(window.location)).searchParams.get("lang");

		master_class = master_class == null ? "Fighter" : master_class;
		url = url == null ? "0" : url;
		lang = lang == null ? "tw" : lang;

		var lang_file = document.createElement("script");
		lang_file.src = "js/strings/skill_calc_tw.js";
		document.body.appendChild(lang_file);

		document.body.innerHTML = document.body.innerHTML.replace(/%%basic_class%%/g, class_data[class_data[master_class].basic_class].display_name);
		document.body.innerHTML = document.body.innerHTML.replace(/%%basic_class_id%%/g, class_data[class_data[master_class].basic_class].class_id);
		document.body.innerHTML = document.body.innerHTML.replace(/%%master_class%%/g, class_data[master_class].display_name);
		document.body.innerHTML = document.body.innerHTML.replace(/%%master_class_id%%/g, class_data[master_class].class_id);
		document.body.innerHTML = document.body.innerHTML.replace(/%%lang%%/g, lang);

		document.getElementById("basic_class_icon").src = 'img/' + class_data[class_data[master_class].basic_class].class_id + '_small.png'
		document.getElementById("master_class_icon").src = 'img/' + class_data[master_class].class_id + '_small.png'
		master_class = class_data[master_class].class_id;
	</script>
	<script type="text/javascript" src="js/skill_data.js"></script>
	<script type="text/javascript" src="js/skill_calc.js"></script>
</body>

</html>
